<template>
  <div>
    <!--      人数、地块、面积 统计-->
    <el-row :gutter="24" class="mgb20">
      <el-col :span="4">
        <el-card shadow="hover" :body-style="{ padding: '10px',height:'100px' }">
          <div class="grid-content grid-con-1">
            <i class="el-icon-user-solid grid-con-icon"></i>
            <div class="grid-cont-right">
              <div class="grid-num">{{ this.cbrzs }}</div>
              <div>退耕人数（人）</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="hover" :body-style="{ padding: '10px',height:'100px'}">
          <div class="grid-content grid-con-2">
            <i class="grid-con-icon">
              <svg-icon class="svg" icon-class="land"/>
            </i>
            <div class="grid-cont-right">
              <div class="grid-num">{{ this.dkzs }}</div>
              <div>退耕地块数（块）</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" :body-style="{ padding: '10px' ,height:'100px'}">
          <div class="grid-content grid-con-3">
            <!--                <i class="el-icon-s-goods grid-con-icon"></i>-->
            <i class="grid-con-icon">
              <svg-icon class="svg" icon-class="area"/>
            </i>
            <div class="grid-cont-right">
              <div class="grid-num">{{ this.sczmj }}</div>
              <div>退耕面积（亩）</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" :body-style="{ padding: '10px' ,height:'100px'}">
          <div class="grid-content grid-con-4" style="color: #409EFF!important;">
            <!--                <i class="el-icon-s-goods grid-con-icon"></i>-->
            <i class="grid-con-icon">
              <svg-icon class="svg" icon-class="money"/>
            </i>
            <div class="grid-cont-right">
              <div class="grid-num">{{ this.distedMoney }}</div>
              <div>发放资金总数（元）</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="hover" :body-style="{ padding: '10px',height:'100px' }">
          <div class="grid-content grid-con-4" style="color: #409EFF;">
            <!--                <i class="el-icon-s-goods grid-con-icon"></i>-->
            <i class="grid-con-icon">
              <svg-icon class="svg" icon-class="percent"/>
            </i>
            <div class="grid-cont-right">
              <div class="grid-num">{{ this.distedRatio.toFixed(2) }}</div>
              <div>发放进度比例（%）</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <!--<el-col :span="24">
        &lt;!&ndash;<el-card shadow="hover" class="mgb20" style="height:252px;">
          <div class="user-info">
            <img src="../assets/image/profile.jpg" class="user-avator" alt />
            <div class="user-info-cont">
              <div class="user-info-name">{{ name }}</div>
              <div>{{ role }}</div>
            </div>
          </div>
          <div class="user-info-list">
            上次登录时间：
            <span>2019-11-01</span>
          </div>
          <div class="user-info-list">
            上次登录地点：
            <span>东莞</span>
          </div>
        </el-card>&ndash;&gt;

      </el-col>-->
      <el-col :span="12">
        <!--        预算待办审批-->
        <el-card shadow="hover" style="height:300px;">
          <template #header>
            <div class="clearfix">
              <span>待办审批</span>
            </div>
          </template>
          <!--  Vue
            <el-progress :percentage="71.3" color="#42b983"></el-progress>JavaScript
            <el-progress :percentage="24.1" color="#f1e05a"></el-progress>CSS
            <el-progress :percentage="13.7"></el-progress>HTML
            <el-progress :percentage="5.9" color="#f56c6c"></el-progress>-->
          <el-tabs type="border-card" style="height:230px;">
            <!--            <el-tab-pane label="合同信息">-->
            <el-tab-pane v-if="isContract">
              <span slot="label">
                合同信息
                <el-badge v-if="this.htList.length>0" :value="this.htList.length" class="item"></el-badge>
              </span>
              <el-table :show-header="false" :data="htList" style="width:100%;height: 165px;" @row-click="htClick">
                <el-table-column>
                  <template #default="scope">
                    <div
                      class="todo-item"
                      :class="{'todo-item-del': scope.row.status,}"
                    >{{ scope.row.title }}
                    </div>
                  </template>
                </el-table-column>
                <!--<el-table-column width="60">
                  <template>
                    <i class="el-icon-edit"></i>
                    <i class="el-icon-delete"></i>
                  </template>
                </el-table-column>-->
              </el-table>
            </el-tab-pane>
            <!--            <el-tab-pane label="预算信息">-->
            <el-tab-pane v-if="isBudget">
              <span slot="label">
                预算信息
                <el-badge v-if="this.ysList.length>0" :value="this.ysList.length" class="item"></el-badge>
              </span>
              <el-table :show-header="false" :data="ysList" style="width:100%;height: 160px;" @row-click="ysClick">
                <el-table-column>
                  <template #default="scope">
                    <div
                      class="todo-item"
                      :class="{
                                        'todo-item-del': scope.row.status,
                                    }"
                    >{{ scope.row.title }}
                    </div>
                  </template>
                </el-table-column>
                <!--<el-table-column width="60">
                  <template>
                    <i class="el-icon-edit"></i>
                    <i class="el-icon-delete"></i>
                  </template>
                </el-table-column>-->
              </el-table>
            </el-tab-pane>
            <!--            <el-tab-pane label="发放信息">-->
            <el-tab-pane v-if="isDistribution">
              <span slot="label">
                发放信息
                <el-badge v-if="this.ffList.length>0" :value="this.ffList.length" class="item"></el-badge>
              </span>
              <el-table :show-header="false" :data="ffList" style="width:100%;min-height: 360px;" @row-click="ffClick">
                <el-table-column>
                  <template #default="scope">
                    <div
                      class="todo-item"
                      :class="{
                                        'todo-item-del': scope.row.status,
                                    }"
                    >{{ scope.row.title }}
                    </div>
                  </template>
                </el-table-column>
                <!--<el-table-column width="60">
                  <template>
                    <i class="el-icon-edit"></i>
                    <i class="el-icon-delete"></i>
                  </template>
                </el-table-column>-->
              </el-table>
            </el-tab-pane>
            <el-tab-pane v-if="isSupervise">
              <span slot="label">
                监管信息
                <el-badge v-if="this.superviseList.length>0" :value="this.superviseList.length" class="item"></el-badge>
              </span>
              <el-table :show-header="false" :data="superviseList" style="width:100%;height: 160px;"
                        @row-click="jgClick">
                <el-table-column width="180" label="任务编号" align="center" prop="taskNo"/>
                <el-table-column label="行政区划" min-width="125" align="center" prop="taskDeptCode">
                  <template slot-scope="scope">
          <span
            v-if="scope.row.planCompleteTime<scope.row.checkTime||(scope.row.planCompleteTime<new Date()&&(scope.row.checkTime==''||scope.row.checkTime==null) )"
            style="color: red;">{{
              scope.row.countyName
            }}-{{ scope.row.townshipName }}-{{ scope.row.superviseDeptName }}</span>
                    <span v-else>{{ scope.row.countyName }}-{{ scope.row.townshipName }}-{{
                        scope.row.superviseDeptName
                      }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="任务派发时间" align="center" prop="assignTime" min-width="180">
                  <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.assignTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="检查方式" align="center" prop="taskCheckType" :formatter="taskCheckTypeFormat"/>
                <el-table-column label="协调检查" align="center" prop="synergistic">
                  <template slot-scope="scope">
                    {{ scope.row.synergistic == 'Y' ? '是' : '否' }}
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
      <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
        <div style="min-height: 400px">
        <el-form ref="form">
          <el-row>
            <el-col :span="24" style="text-align: center;font-size: 20px;font-weight: bold">
              {{form.noticeTitle}}
            </el-col>
            <el-col :span="24">
              <el-divider></el-divider>
            </el-col>
            <el-col :span="24">
<!--                <view v-html="form.noticeContent"></view>-->
              <div v-html="form.noticeContent"></div>
            </el-col>
          </el-row>
        </el-form>
        </div>
        <!--<div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="cancel">确 定</el-button>
        </div>-->
      </el-dialog>
      <el-col :span="12">
        <!--        通知公告-->
        <el-card shadow="hover" style="height:300px;">
          <template #header>
            <div class="clearfix">
              <span>通知公告</span>
            </div>
          </template>
          <!--          <el-table :show-header="false" :data="todoList1" style="width:100%;">-->
          <el-table :show-header="false" :data="noticeList" style="width:100%;">
            <!-- <el-table-column width="40">
               <template #default="scope">
                 <el-checkbox v-model="scope.row.status"></el-checkbox>
               </template>
             </el-table-column>-->
            <el-table-column>
              <template #default="scope">
                <div @click="handleView(scope.row)">{{ scope.row.noticeTitle }}
                </div>
                <!--  <div
                    class="todo-item"
                    :class="{'todo-item-del': scope.row.status,}"
                  >{{ scope.row.noticeTitle }}
                  </div>-->
              </template>
            </el-table-column>
            <!--<el-table-column width="60">
              <template>
                <i class="el-icon-edit"></i>
                <i class="el-icon-delete"></i>
              </template>
            </el-table-column>-->
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <!--    合同签订情况统计-->
    <!--<el-row :gutter="20">
      <el-col :span="24">
        <el-card shadow="hover">
          <schart style="min-height: 500px" ref="bar1" class="schart" canvasId="bar1"
                  :options="contractOptions"></schart>
        </el-card>
      </el-col>
    </el-row>-->

    <el-row :gutter="20">
      <!--    合同签订情况统计-->
      <el-col :span="8">
        <el-card shadow="hover">
          <template #header>
            <div class="clearfix">
              <span>合同签订情况统计</span>
            </div>
          </template>
          <!--<schart style="min-height: 500px" ref="bar2" class="schart" canvasId="bar1"
                  :options="contractOptions"></schart>-->

          <schart style="height: 400px" ref="bar1" class="schart" canvasId="bar1"
                  :options="contractOptions"></schart>
        <!--  <bar-chart title="合同签订情况统计" :productTypeName="this.contractName.toString()"
                     :chartProductTypeData="this.contractData" width="100%"/>-->
        </el-card>
      </el-col>
      <el-col :span="8">
        <!--        资金预算统计-->
        <el-card shadow="hover">
          <template #header>
            <div class="clearfix">
              <span>资金预算统计</span>
            </div>
          </template>
          <!--          <schart style="min-height: 500px" ref="bar" class="schart" canvasId="bar" :options="options"></schart>-->
          <pie-chart :typeName="this.budgetName" :chartData="this.budgetData"/>
        </el-card>
      </el-col>
      <el-col :span="8">
        <!--        资金发放情况统计-->
        <el-card shadow="hover">
          <template #header>
            <div class="clearfix">
              <span>资金发放情况统计</span>
            </div>
          </template>
          <!--          <schart style="min-height: 500px" ref="line" class="schart" canvasId="line" :options="options2"></schart>-->
          <line-chart title="资金发放情况统计" width="98%" height="400px" :name="this.paymentName"
                      :chartData="this.paymentData"></line-chart>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Schart from "vue-schart";
import {getInfo} from "@/api/login";
import {
  budgetListForHome,
  contractListForHome,
  distributionListForHome,
  indexBudget,
  indexContract,
  indexDept,
  indexPayment,
  noticeList
} from "@/api/report/report";
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import {listSupervise} from "@/api/jdgl/supervise";
import {getNotice} from "@/api/system/notice";

export default {
  name: "dashboard",
  data() {
    return {
      isContract: false,
      isBudget: false,
      isSupervise: false,
      isDistribution: false,
      // 表单参数
      form: {},
      title: "",
      open: false,
      superviseCheckType: [],
      cbrzs: 0,
      contractName: [],
      contractData: [],
      paymentName: [],
      paymentData: [],
      budgetName: [],
      budgetData: [],
      dkzs: 0,
      sczmj: 0,
      distedMoney: 0,
      distedRatio: 0,
      total: 10,
      deptLen: 0,
      noticeList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 8,
        noticeTitle: null,
        noticeType: null,
        // states: null,
        httype: null,
      },
      todoList1: [
        {
          title: "关于“十四五”期间支持科技创新进口税收政策的通知",
          status: false
        },
        {
          title: "三部门关于深化增值税改革有关政策的公告",
          status: false
        },
        {
          title: "三部门关于深化增值税改革有关政策的公告",
          status: false
        },
        {
          title: "关于“十四五”期间支持科技创新进口税收政策的通知",
          status: false
        },
        {
          title: "关于“十四五”期间支持科技创新进口税收政策的通知",
          status: false
        }
      ],
      htList: [
        /*{
          title: "待审核信息【2021年苟各庄镇合同信息】",
        },
        {
          title: "待审核信息【2021年苟各庄镇退耕还淀预算信息】",
        },
        {
          title: "待审核信息【2021年苟各庄镇退耕还淀预算信息】",
        },
        {
          title: "待审核信息【2021年苟各庄镇退耕还淀预算信息】",
        },
        {
          title: "待审核信息【2021年苟各庄镇退耕还淀预算信息】",
        },
        {
          title: "待审核信息【2021年苟各庄镇退耕还淀预算信息】",
        }*/
      ],
      superviseList: [],
      ysList: [
        /*{
          title: "待审核信息【2021年苟各庄镇退耕还淀预算信息】",
        },
        {
          title: "待审核信息【2021年苟各庄镇退耕还淀预算信息】",
        },
        {
          title: "待审核信息【2021年苟各庄镇退耕还淀预算信息】",
        },
        {
          title: "待审核信息【2021年苟各庄镇退耕还淀预算信息】",
        },
        {
          title: "待审核信息【2021年苟各庄镇退耕还淀预算信息】",
        },
        {
          title: "待审核信息【2021年苟各庄镇退耕还淀预算信息】",
        }*/
      ],
      ffList: [
        /*{
          title: "待审核信息【2021年苟各庄镇退耕还淀发放信息】",
          status: false
        },
        {
          title: "待审核信息【2021年苟各庄镇退耕还淀预算信息】",
          status: false
        },
        {
          title: "待审核信息【2021年苟各庄镇退耕还淀预算信息】",
          status: false
        },
        {
          title: "待审核信息【2021年苟各庄镇退耕还淀预算信息】",
          status: false
        },
        {
          title: "待审核信息【2021年苟各庄镇退耕还淀预算信息】",
          status: false
        },
        {
          title: "待审核信息【2021年苟各庄镇退耕还淀预算信息】",
          status: false
        }*/
      ],
      data: [
        {
          name: "2018/09/04",
          value: 1083
        },
        {
          name: "2018/09/05",
          value: 941
        },
        {
          name: "2018/09/06",
          value: 1139
        },
        {
          name: "2018/09/07",
          value: 816
        },
        {
          name: "2018/09/08",
          value: 327
        },
        {
          name: "2018/09/09",
          value: 228
        },
        {
          name: "2018/09/10",
          value: 1065
        }
      ],
     /* contractOptions: {
        type: "bar",
        title: {
          text: "合同签订情况统计",
          shadowColor: 'black'
        },
        xRorate: 25,
        labels: ["雄县", "安新县", "容城县"],
        datasets: [
          {
            label: "退耕地块数",
            data: [234, 278, 270]
          },
          /!* {
             label: "百货",
             data: [164, 178, 190, 135, 160]
           },*!/
          {
            label: "合同签订数",
            data: [144, 198, 150]
          }
        ]
      },*/
      contractOptions: {
        type: "bar",
        title: {
          text: "合同签订情况统计",
          shadowColor: 'black'
        },
        xRorate: 25,
        // labels: ["雄县", "安新县", "容城县"],
        labels: [],
        datasets: [
          /*{
            label: "退耕地块数",
            data: [234, 278, 270]
          },
          /!* {
             label: "百货",
             data: [164, 178, 190, 135, 160]
           },*!/
          {
            label: "合同签订数",
            data: [144, 198, 150]
          }*/
        ]
      },
      options: {
        type: "bar1",
        title: {
          text: "资金预算统计"
        },
        xRorate: 25,
        // labels: ["雄县", "安新县", "容城县"],
        labels: [],
        datasets: [
          /* {
             label: "预算金额",
             data: [23400, 20078, 10270]
           },*/
        ]
      },
      options2: {
        type: "line",
        title: {
          text: "资金发放情况统计"
        },
        // labels: ["雄县", "安新县", "容城县"],
        labels: [],
        datasets: [
          /*{
            label: "已发放",
            data: [23420, 22078, 27000]
          },
          /!*{
            label: "百货",
            data: [164, 178, 150, 135, 160]
          },*!/
          {
            label: "待发放",
            data: [17000, 11800, 12000]
          }*/
        ]
      }
    };
  },
  components: {
    Schart,
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  computed: {
    role() {
      return this.name === "admin" ? "超级管理员" : "普通用户";
    }
  },
  created() {
    this.getDicts('supervise_check_type').then(response => {
      this.superviseCheckType = response.data
    })
    // 首页退耕、地块和承包方统计
    getInfo().then(response => {
      let permissions = response.permissions.toString();
      let roles = response.roles.toString();
      let dept = response.user.dept.deptCode;
      this.deptLen=dept.length;
      if (permissions.indexOf("contract:change:list1") > -1||dept.length==6) {
        this.isContract = true;
      } else {
        this.isContract = false;
      }
      if(dept.length==6&&roles.indexOf("citysh-approval") > -1)
      {
        this.queryParams.httype = 1;
        this.queryParams.shzts = "1";
        let j = 0;
        contractListForHome({
          pageNum: this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize,
          shzts: this.queryParams.shzts,
          httype: this.queryParams.httype
        }).then(response => {
          let len = response.rows.length;
          let arr = [];
          /*response.rows.forEach(item => {
          j++;
          arr.push({title: '待审核【' + item.cbfmc + '】总合同签约'});
          if (len == j) {
            this.htList=arr;
          }
        })*/
          response.rows.forEach(item => {
            j++;
            this.htList.push({title: '待审核【' + item.cbfmc + '】总合同签约'});
          })
        });
      }

      if (permissions.indexOf("budget:budget:list1") > -1) {
        this.isBudget = true;
        // 待审核预算信息
        this.queryParams.states = '1';
        budgetListForHome(this.queryParams).then(response => {
          let len = response.rows.length;
          let arr = [];
          response.rows.forEach(item => {
            i++;
            arr.push({title: '待审核信息【' + item.name + '】'});
            if (len == i) {
              this.ysList = arr;
            }
          })
        });
      }
      else if(permissions.indexOf("budget:budget:submitList") > -1)      {
        this.isBudget = true;
        // 待审核预算信息
        this.queryParams.states = '0';
        budgetListForHome(this.queryParams).then(response => {
          let len = response.rows.length;
          let arr = [];
          response.rows.forEach(item => {
            i++;
            arr.push({title: '待复核提交信息【' + item.name + '】'});
            if (len == i) {
              this.ysList = arr;
            }
          })
        });
      }
      else {
        this.isBudget = false;
      }
      if (permissions.indexOf("distribution:distribution:list1") > -1) {
        this.isDistribution = true;
      } else {
        this.isDistribution = false;
      }
      if (permissions.indexOf("supervise:supervise:list1") > -1) {
        this.isSupervise = true;
      } else {
        this.isSupervise = false;
      }
      let deptCode = response.user.dept.deptCode;
      indexDept(deptCode).then(response => {
        this.cbrzs = response.data.cbrzs;
        this.dkzs = response.data.dkzs;
        this.sczmj = response.data.sczmj;
        this.distedMoney = response.data.distedMoney;
        this.distedRatio = parseFloat(response.data.distedRatio) * 100;
      })
      this.queryParams.taskStates = '0';
      this.queryParams.taskDeptCode = deptCode;
      listSupervise({taskDeptCode: deptCode, taskStates: '0,1', pageNum: 1, pageSize: 8}).then(response => {
        this.superviseList = response.rows;
        // this.total = response.total;
        this.loading = false;
      });
    });

    //合同待审核信息
    this.queryParams.httype = 0;
    this.queryParams.shzts = "1";
    let i = 0;
    contractListForHome({pageNum:this.queryParams.pageNum,pageSize:this.queryParams.pageSize,shzts:this.queryParams.shzts,httype:this.queryParams.httype} ).then(response => {
      let len = response.rows.length;
      let arr = [];
      response.rows.forEach(item => {
        i++;
          this.htList.push({title: '待审核【' + item.cbfmc + '】合同签约'});
      })
    });
    /*if(this.deptLen==6) {
      this.queryParams.httype = 1;
      this.queryParams.shzts = "1";
      let j = 0;
      contractListForHome({
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        shzts: this.queryParams.shzts,
        httype: this.queryParams.httype
      }).then(response => {
        let len = response.rows.length;
        let arr = [];
        /!*response.rows.forEach(item => {
        j++;
        arr.push({title: '待审核【' + item.cbfmc + '】总合同签约'});
        if (len == j) {
          this.htList=arr;
        }
      })*!/
        response.rows.forEach(item => {
          j++;
          this.htList.push({title: '待审核【' + item.cbfmc + '】总合同签约'});
        })
      });
    }*/

/*    // 待审核预算信息
    this.queryParams.states = '1';
    budgetListForHome(this.queryParams).then(response => {
      let len = response.rows.length;
      let arr = [];
      response.rows.forEach(item => {
        i++;
        arr.push({title: '待审核信息【' + item.name + '】'});
        if (len == i) {
          this.ysList = arr;
        }
      })
    });*/

    this.queryParams.state = "1";
    distributionListForHome(this.queryParams).then(response => {
      let len = response.rows.length;
      let arr = [];
      response.rows.forEach(item => {
        i++;
        arr.push({title: '待审核信息【' + item.batchNumber + '】'});
        if (len == i) {
          this.ffList = arr;
        }
      })
    });

    // 通知公告
    noticeList(this.queryParams).then(response => {
      this.noticeList = response.rows;
    });
    /*   bigData(this.queryParams).then(response => {
         // this.noticeList = response.rows;
       });*/

    // 合同签订情况统计
    indexContract({pageSize: 50, pageNum: 1}).then(response => {
      let i = 0;
      let dkzs = [];
      let htzs = [];
      let rows=response.rows;
      let len = rows.length;
      let _this = this;
      rows.forEach(item => {
        i++;
        console.info(item.dkzs,item.htzs);
        if (item.dkzs > 0 || item.htzs > 0) {

          this.contractOptions.labels.push(item.deptName);

          _this.contractName.push(item.deptName);
          dkzs.push(item.dkzs);
          htzs.push(item.htzs);
          if (len == i) {
            this.contractOptions.datasets.push({label: "退耕地块数", data: dkzs}, {label: "合同签订数", data: htzs});
            // _this.contractData.push({name: "退耕地块数", data: dkzs}, {name: "合同签订数", data: htzs});
            _this.contractData.push({name: "退耕地块数", data: dkzs});
            _this.contractData.push({name: "合同签订数", data: htzs});
          }
        } else {
          /*_this.contractData.push({name: "退耕地块数", data: dkzs});
          _this.contractData.push({name: "合同签订数", data: htzs});*/
          if (len == i) {
            this.contractOptions.datasets.push({label: "退耕地块数", data: dkzs}, {label: "合同签订数", data: htzs});
            // _this.contractData.push({name: "退耕地块数", data: dkzs}, {name: "合同签订数", data: htzs});
            _this.contractData.push({name: "退耕地块数", data: dkzs});
            _this.contractData.push({name: "合同签订数", data: htzs});
          }
        }
      });
    });
    //資金发放情况统计
    indexPayment({pageSize: 30, pageNum: 1}).then(response => {
      let i = 0;
      let distedMoney = [];
      let unDistedMoney = [];
      let len = response.rows.length;
      response.rows.forEach(item => {
        i++;
        if (item.distedMoney > 0 || item.unDistedMoney > 0) {
          this.paymentName.push(item.deptName);
          distedMoney.push(item.distedMoney);
          unDistedMoney.push(item.unDistedMoney);
          if (len == i) {
            this.paymentData.push({name: "已发放", data: distedMoney});
            this.paymentData.push({name: "未发放", data: unDistedMoney});
          }
        } else {
          if (len == i) {
            // this.options2.datasets.push({label: "已发放", data: distedMoney}, {label: "未发放", data: unDistedMoney});
            this.paymentData.push({name: "已发放", data: distedMoney});
            this.paymentData.push({name: "未发放", data: unDistedMoney});
          }
        }
      })
    });
    // 资金预算统计
    indexBudget({pageSize: 40, pageNum: 1}).then(response => {
      response.rows.forEach(item => {
        let money = [];
        if (item.money > 0) {
          this.budgetName.push(item.deptName);
          money.push(item.money);
          this.budgetData.push({name: item.deptName, value: money});
        }
      })
    });
  },
  methods: {
    cancel() {
      this.open = false;
    },
    // 表单重置
    reset() {
      this.form = {
        noticeId: undefined,
        noticeTitle: undefined,
        noticeType: undefined,
        noticeContent: undefined,
        status: "0"
      };
      this.resetForm("form");
    },
    /** 修改按钮操作 */
    handleView(row) {
      this.reset();
      const noticeId = row.noticeId || this.ids
      getNotice(noticeId).then(response => {
        this.form = response.data;
        this.open = true;
        // this.title = "通知公告";
      });
    },
    taskCheckTypeFormat(row, column) {
      return this.selectDictLabel(this.superviseCheckType, row.taskCheckType);
    },
    changeDate() {
      const now = new Date().getTime();

      this.data.forEach((item, index) => {
        const date = new Date(now - (6 - index) * 86400000);
        item.name = `${date.getFullYear()}/${date.getMonth() +
        1}/${date.getDate()}`;
      });
    },
    htClick(res) {
      if(res.title.indexOf("总合同签约")==-1)
      {
        this.$router.push({path: this.redirect || "htgl/fbht"});
      }
      else
      {
        this.$router.push({path: this.redirect || "htgl/zbhtsh"});
      }

    },
    ysClick(res) {
      if(res.title.indexOf("复核提交")>=-1)
      {
        this.$router.push({path: this.redirect || "zjgl/myBudgetFunds"});
      }
      else
      {
        this.$router.push({path: this.redirect || "zjgl/zjyssh"});
      }
    },
    ffClick() {
      this.$router.push({path: this.redirect || "zjgl/ffsh"});
    },
    jgClick() {
      this.$router.push({path: this.redirect || "/jdgl/jdzx"});
    },
  }
};
</script>

<style scoped>

h2 {
  text-align: center;
  padding: 30px;
  font-size: 18px;
}

#chart_example {
  width: 100%;
  height: 500px;
  border: 1px solid red;
  margin: 0 auto;
}

.grid-con-1 .grid-con-icon, .grid-con-2 .grid-con-icon, .grid-con-3 .grid-con-icon, .grid-con-4 .grid-con-icon, .grid-con-5 .grid-con-icon {
  font-size: 30px;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  color: #fff;
  margin-top: -25px;
}

.grid-cont-right {
  margin-top: -30px;
}

.el-row {
  margin-bottom: 20px;
}

.grid-con-4 .grid-con-icon {
  background: #409EFF;
}

.grid-con-5 .grid-con-icon {
  background: #E6A23C;
}

.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}

.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

.grid-con-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
  color: rgb(242, 94, 67);
}

.user-info {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
}

.user-avator {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.user-info-cont {
  padding-left: 50px;
  flex: 1;
  font-size: 14px;
  color: #999;
}

.user-info-cont div:first-child {
  font-size: 30px;
  color: #222;
}

.user-info-list {
  font-size: 14px;
  color: #999;
  line-height: 25px;
}

.user-info-list span {
  margin-left: 70px;
}

.mgb20 {
  margin-bottom: 20px;
}

.todo-item {
  font-size: 14px;
}

.todo-item-del {
  text-decoration: line-through;
  color: #999;
}

.schart {
  width: 100%;
  height: 300px;
}
</style>

<!--<template>
  <div class="dashboard-editor-container">

    <panel-group @handleSetLineChartData="handleSetLineChartData" />

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row>

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
    </el-row>


  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      lineChartData: lineChartData.newVisitis
    }
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>-->

